// 引入 自定义接口js文件
import {request} from "../../request/index.js";
//使用 es7 的 async 语法所需引用
import regeneratorRuntime from '../../lib/runtime/runtime';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //获取商品分类列表数据
    // CategoryList:[],
    //左侧的菜单数据
    leftMenuList:[],
    //右侧的商品数据
    rightMenuList:[],
    //被点击的左侧菜单
    currentIndex:0,
    //右侧内容的关东条距离顶部的距离
    ScrollTop:0
  },
  //接口的返回数据
  Cates:[],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /*
    1：先判断本地存错中是否存在旧数据
    2：若无旧数据 则直接发送新的请求
    3：若有旧数据 同时 旧数据未过期 则使用本地缓存中的旧数据即可
    */

    //1：获取本地存储中的数据（小程序也提供了本地存储的技术）
    const Cates = wx.getStorageSync('cates');
    if(!Cates){
      //不存在  则发送请求，重新获取数据
      this.GetCategory();
    }
    else{
      //有旧数据 定义过期时间 10s改成 5分钟
      if(Date.now()-Cates.time>1000*10){
        //重新发送请求
        this.GetCategory();
      }else{
        //可以使用旧数据
        this.Cates = Cates.data;
        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v=>v.cat_name);
        //构造右侧的商品数据
        let rightMenuList = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightMenuList
        })
      }
    }
  },
  // //获取分类数据（使用 es5 or es6语法）
  // GetCategory(){
  //   request({url:"/categories"})
  //   .then(result=>{
  //     this.Cates=result.data.message;
      
  //     //把接口数据放入到本地存储中
  //     wx.setStorageSync('cates', {time:Date.now,data: this.Cates});
      
  //     //构造左侧的大菜单数据
  //     let leftMenuList = this.Cates.map(v=>v.cat_name);
  //     //构造右侧的商品数据
  //     let rightMenuList = this.Cates[0].children;
  //     this.setData({
  //       leftMenuList,
  //       rightMenuList
  //     })
  //   })
  // },

  //获取分类数据（使用 es7 的 async await 来发送请求）
  async GetCategory(){
    const result = await request({url:"/categories"});
    // this.Cates=result.data.message;
    this.Cates=result;
    //把接口数据放入到本地存储中
    wx.setStorageSync('cates', {time:Date.now,data: this.Cates});
    
    //构造左侧的大菜单数据
    let leftMenuList = this.Cates.map(v=>v.cat_name);
    //构造右侧的商品数据
    let rightMenuList = this.Cates[0].children;
    this.setData({
      leftMenuList,
      rightMenuList
    })
  },

  //左侧菜单的点击事件
  HandelItemTap(e){
    const {index}=e.currentTarget.dataset;
     //构造右侧的商品数据
     //根据不同的索引来渲染右侧的商品内容
     let rightMenuList = this.Cates[index].children;
    //重新设置 右侧内容的scroll-view标签的距离的顶部距离
     this.setData({
      currentIndex:index,
      rightMenuList,
      ScrollTop:0
    })
  }
})